<!--
  HTML模板文件
  
  这是Vue单页应用的HTML模板文件，作为应用的入口点
  在构建过程中，webpack会将编译后的JavaScript和CSS文件注入到这个模板中
-->
<!DOCTYPE html>
<!-- 声明HTML5文档类型 -->
<html lang="en">
  <!-- 设置页面语言为英文，有助于搜索引擎和屏幕阅读器 -->
  <head>
    <!-- 设置字符编码为UTF-8，支持国际化字符 -->
    <meta charset="utf-8" />
    
    <!-- 设置IE浏览器使用最新的渲染引擎 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
    <!-- 响应式设计的视口配置，确保在移动设备上正确显示 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    
    <!-- 设置网站图标，BASE_URL是webpack注入的公共路径变量 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    
    <!-- 动态设置页面标题，从webpack配置中获取 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 当JavaScript被禁用时显示的提示信息 -->
    <noscript>
      <strong
        >抱歉，<%= htmlWebpackPlugin.options.title %> 需要启用JavaScript才能正常工作。请启用JavaScript后继续。</strong
      >
    </noscript>
    
    <!-- Vue应用的挂载点，Vue实例会渲染到这个div中 -->
    <!-- 这个div的内容会被Vue应用完全替换 -->
    <div id="app"></div>
    
    <!-- webpack会在构建时自动在这里注入编译后的JavaScript文件 -->
  </body>
</html>
